<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title id="eeee">不存在的文章预览</title>
    <link rel="shortcut icon" href="./../asset/favicon.png">
    <script>
        /*让文字和标签的大小随着屏幕的尺寸做变话 等比缩放*/
        var html = document.getElementsByTagName('html')[0];
        /*取到屏幕的宽度*/
        var width = window.innerWidth;
        /* 640 100  320 50 */
        var fontSize = 100 / 750 * width;
        /*设置fontsize*/
        html.style.fontSize = fontSize + 'px';
        window.onresize = function () {
            var html = document.getElementsByTagName('html')[0];
            /*取到屏幕的宽度*/
            var width = window.innerWidth;
            /* 640 100  320 50 */
            var fontSize = 100 / 750 * width;
            /*设置fontsize*/
            html.style.fontSize = fontSize + 'px';
        }
    </script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .top {
        height: 0.9rem;
        font-size: 0.3rem;
        text-align: center;
        line-height: 0.9rem;
        color: #000
    }

    .titleTop {
        padding: 0.4rem 0.3rem;
        font-size: 0.34rem;
        color: #333;
        width: 100%;
        box-sizing: border-box;
        border-top: 0.01rem solid #b4b4b4;
        border-bottom: 0.01rem solid #b4b4b4;
        line-height: 0.5rem;
        word-wrap: break-word;
        word-break: normal;
        font-weight: normal;

    }

    .flex {
        display: flex;
        justify-content: space-between;
        font-size: 0.26rem;
        margin-top: 0.5rem;
        color: #333;
    }

    #time {
        color: #b4b4b4
    }

    .content {
        padding: 0.3rem 0.3rem;
        font-size: 0.3rem;
        color: #333;
        line-height: 0.5rem;
        word-break: break-all;
    }

    .content img {
        width: 100%;
        display: block;
        margin: 10px 0
    }

    #video {
        width: 100%;
        margin: 10px 0;
    }
    #title{
       word-wrap: break-word;
        word-break: normal;
    }

    /*评论列表*/
    .commotTitle{
        color: #333;
        font-size: 0.2rem;
        text-align: center;
        line-height:0.3rem;
    }
    .commotList{
        box-sizing:border-box;
        padding: 0.3rem 0.3rem; 
        padding-bottom: 0
    }
    .commotItem{
        color: #333;
        font-size: 0.3rem;
        margin-top: 0.05rem;
        border-bottom: 0.01rem solid #b4b4b4;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .commotList .commotItem:first-child{
        border-top: 0.01rem solid #b4b4b4;
    }
    .commotList .commotItem:last-child{
        border-bottom: 0
    }
    .commitTop{
        display: flex;
        justify-content: space-between;
        margin-top: 0.1rem;
         
    }
    .userReplyTime{
        font-size: 0.28rem;
    }
    .commitbody{
        box-sizing:border-box;
        padding: 0.2rem 0
    }
    .calbtn{
        margin-bottom:0.15rem; 
        width: 0.9rem;
        height: 0.5rem;
        align-self: flex-end;
    }
</style>

<body style="box-sizing:border-box">
    <div class="top">
        内容详情
    </div>
    <div class="titleTop">
        <p id="title">听说邵阳开了一家金丝楠木馆是不是真的?</p>
        <div class="flex">
            <span id="name">疯狂的小田鼠</span>
            <span id="time">2015-03-02 23:12:30</span>
        </div>
    </div>
    <div class="content">
        <div id="text">
            html中超出盒子宽度会自动换行的，不用设置，如果你连续的英文之间没用空格，那么它会以为是一个单词，就不会换行，这个时候加上word-break: break-all; word-wrap:break-word;
        </div>
        <video controls poster="" id='video' src=""></video>
        <div id="text2">
            html中超出盒子宽度会自动换行的，不用设置，如果你连续的英文之间没用空格，那么它会以为是一个单词，就不会换行，这个时候加上word-break: break-all; word-wrap:break-word;
        </div>
    </div>
    <h3  class="commotTitle">文章评论</h3>
    <div class="commotList">
       
    </div>
</body>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/common.js"></script>
<script src="js/template.js"></script>
<!-- 评论列表模板-->
<script type="text/html" id="commotList">
    {{each rows as value i}}
        <div data-id={{value.id}} class="commotItem">
            <div class="commitTop">
                <div class="username">{{value.nickname}}</div>
                <div class="userReplyTime">{{value.commentTime}}</div>
            </div>
            <div class="commitbody">{{value.text}}</div>
            <button class="calbtn">删除</button>
        </div>
    {{/each}}
</script>
<script>
    // 时间

    var date = new Date()
    var month = date.getMonth() + 1
    var day = date.getDate()
    var hour = date.getHours()
    var minute = date.getMinutes()
    var second = date.getSeconds()
    if (month < 10) {
        month = "0" + month
    }
    if (day < 10) {
        day = "0" + day
    }
    if (hour < 10) {
        hour = "0" + hour
    }
    if (minute < 10) {
        minute = "0" + minute
    }
    if (second < 10) {
        second = "0" + second
    }
    
    var time = date.getFullYear() + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second
    console.log(window.location.search)
    if (window.location.search) {
        var id = parseInt(window.location.search.substr(window.location.search.indexOf("=") + 1))
        document.getElementById("eeee").innerText="文章预览"
        // 请求文章内容
        postSendData({
            url: "article/detail",
            msg: {
                id: id
            },
            success: function (data) {
                document.getElementById('title').innerText = data.msg.title
                document.querySelector("#name").innerText = data.msg.authorName
                document.getElementById("time").innerHTML = data.msg.time
                document.getElementById("text").innerHTML = data.msg.text
                document.getElementById("text2").innerHTML = data.msg.text2
                if (data.msg.videoUrl == "") {
                    $("#video").remove()
                } else {
                    document.getElementById("video").setAttribute("src", data.msg.videoUrl)
                    document.getElementById("video").setAttribute("poster", data.msg.faceImg)
                }
            }
        })
        // 请求文章评论
        postSendData({
            url: "article/commentlist",
            msg: {
                articleId: id
            },
            success(res){
                var html=template("commotList",res.msg)
                $(".commotList").html(html)
                deleteCommot()
            }
        })

        // 删除评论
         function deleteCommot(){
            var delBtn=document.querySelectorAll('.calbtn')
            for(let i=0;i<delBtn.length;i++){
                delBtn[i].onclick=function(){
                    var id=parseInt($(this).parent('.commotItem').attr("data-id"))
                   $(this).parent('.commotItem').remove()
                   postSendData({
                        url:"article/delComment",
                        msg:{
                            commentId:id
                        },
                        success:function(res){
                            alert(res.desc)
                        }
                    })
                }
            }
            
        }
}else if (localStorage.getItem("p_art")){
    if (sessionStorage.getItem("p_art_shuzi")=="0") {
        document.getElementById("eeee").innerText="修改文章预览"
    }else{
        document.getElementById("eeee").innerText="新增文章预览"
    }
    var info = JSON.parse(localStorage.getItem("p_art"))
        console.log(info)
        document.getElementById('title').innerText = info.title
        document.querySelector("#name").innerText = info.authorName
        document.getElementById("time").innerText = time
        document.getElementById("text").innerHTML = info.text
        document.getElementById("text2").innerHTML = info.text2
        if (info.videoUrl == "") {
            $("#video").remove()
        } else {
            document.getElementById("video").setAttribute("src", info.videoUrl)
            document.getElementById("video").setAttribute("poster",info.faceImg)
        }
    }
</script>

</html>